<template>
  <div class="ec-container">
    <!-- <filter-content
      v-if="filterObj.form && filterObj.form.length > 0"
      :obj="filterObj"
      @delete="handleDeleteField"
    /> -->
    <el-table
      v-loading="loading"
      id="crm-table"
      :data="list"
      :height="tableHeight"
      :cell-class-name="cellClassName"
      class="n-table--border"
      stripe
      border
      highlight-current-row
      style="width: 100%"
      @row-click="handleRowClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        :selectable="selectionDisabled"
        show-overflow-tooltip
        type="selection"
        align="center"
        width="55"
      />
      <el-table-column
        v-for="(item, index) in fieldList"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <template v-if="item.prop == 'dealStatus'">
            <i :class="scope.row[item.prop] | dealIcon" />
            <span>{{ scope.row[item.prop] | dealName }}</span>
          </template>
          <template v-else-if="item.prop == 'status' && crmType === 'customer'">
            <i
              v-if="scope.row.status == 2"
              class="wk wk-circle-password customer-lock"
            />
          </template>
          <template v-else-if="item.prop == 'checkStatus'">
            <span
              :style="getStatusStyle(scope.row.checkStatus)"
              class="status-mark"
            />
            <span>{{ getStatusName(scope.row.checkStatus) }}</span>
          </template>
          <template v-else-if="item.prop == 'studentStatus'">
            <span>{{ scope.row[item.prop] | studentStatusName }}</span>
          </template>
          <template v-else-if="item.prop == 'categories'">
            <span>{{ scope.row[item.prop] | categoriesName }}</span>
          </template>
          <template v-else-if="item.prop == 'salesType'">
            <span>{{ scope.row[item.prop] | salesTypeName }}</span>
          </template>
          <template v-else-if="item.prop == 'bankCardAddr'">
            <span>{{ getAddr(scope.row.bankCardAddr) }}</span>
          </template>
          <template v-else>
            {{ fieldFormatter(scope.row, scope.column) }}
          </template>
        </template>
      </el-table-column>
      <el-table-column :resizable="false" />
    </el-table>
    <div class="p-contianer">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size.sync="pageSize"
        :total="total"
        class="p-bar"
        background
        layout="prev, pager, next, sizes, total, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 相关详情页面 -->
    <c-r-m-all-detail
      :visible.sync="showDview"
      :crm-type="rowType"
      :id="rowID"
      @handle="getList"
    />

    <change-student-status-handle
      :crm-type="crmType"
      :idList="selectBatchIdList"
      :selection-list="selectionList"
      :selectIdList="selectIdList"
      :dialog-visible.sync="changeStudentStatusShow"
      @handle="handleCallBackStatus"
    />
  </div>
</template>

<script>
import crmTypeModel from "@/views/crm/model/crmTypeModel";
import { filterIndexfieldsAPI } from "@/api/crm/common";
import { crmLeadsSetFollowAPI } from "@/api/crm/leads";
import { crmCustomerSetFollowAPI } from "@/api/crm/customer";
import { crmMessagAllDealAPI, crmMessagzealByIdAPI } from "@/api/crm/message";
import MessageTableMixin from "../mixins/MessageTable";
import FilterForm from "@/views/crm/components/FilterForm";
import FilterContent from "@/views/crm/components/FilterForm/FilterContent";
import CRMAllDetail from "@/views/crm/components/CRMAllDetail";
import { invoiceFilterFields } from "../../invoice/js/fields";
import ChangeStudentStatusHandle from "@/views/crm/components/SelectionHandle/ChangeStudentStatusHandle"; // 转移
import { crmQueryBatchIdsByIdsAPI } from "@/api/crm/vipStudents";

export default {
  /** 学员管理 的待审核系统 */
  name: "CRMMessage",

  components: {
    FilterForm,
    FilterContent,
    CRMAllDetail,
    ChangeStudentStatusHandle
  },

  filters: {
    dealIcon(statu) {
      return statu == 1 ? "wk wk-success deal-suc" : "wk wk-close deal-un";
    },

    dealName(statu) {
      return statu == 1 ? "已成交" : "未成交";
    },
    studentStatusName(statu) {
      return statu === 0 ? "已退学" : statu == 1 ? "已入学"  : "--";
    },
    categoriesName(statu) {
      if (statu) {
        return statu == 1
          ? "电商美工"
          : statu == 2
          ? "手绘插画"
          : statu == 3
          ? "影视后期"
          : "--";
      }
    },
    salesTypeName(statu) {
      return statu == 1 ? "电销" : "网销";
    }
  },

  mixins: [MessageTableMixin],

  props: {
    // crm类型
    crmType: {
      type: String,
      default: ""
    },
    // crm某个类型下的类型数据
    infoType: {
      type: String,
      default: ""
    },

    infoTitle: {
      type: String,
      default: ""
    },

    infoTips: {
      type: String,
      default: ""
    },

    // 标示信息
    iconData: Object,

    // 展示的时候 才发请求
    show: Boolean,

    // 待办模块 用于 标记
    model: Number
  },

  data() {
    return {
      optionsType: 0,
      isSubType: 1, // 是否是下属
      /** 高级筛选 */
      showFilter: false, // 控制筛选框
      filterFieldList: [],
      filterObj: { form: [] }, // 筛选确定数据
      /** 勾选数据操作 */
      selectionList: [], // 勾选的数据
      /** 控制详情展示 */
      rowID: "", // 行信息
      rowType: "", // 详情类型
      showDview: false,
      changeStudentStatusShow: false,
      selectIdList: [],
      selectBatchIdList: []
    };
  },
  computed: {
    // 展示勾选框
    showFollow() {
      if (this.infoType == "followLeads" || this.infoType == "followCustomer") {
        return true;
      }

      return false;
    },
    showStatus() {
      if (
        this.infoType == "enrollednum" ||
        this.infoType == "dropoutnum" ||
        this.infoType == "suspendClassesNum"
      ) {
        return true;
      }

      return false;
    },

    // 操作按钮列表
    selectionButtonList() {
      let temps;
      temps = this.showFollow
        ? [
            {
              name: "已跟进",
              type: "follow",
              icon: "wk wk-edit"
            }
          ]
        : [];
      temps = this.showStatus
        ? [
            {
              name: "变更学员状态",
              type: "changeStudentStauts",
              icon: "wk wk-edit"
            }
          ]
        : [];
      temps.push({
        name: "标记已处理",
        type: "mark-deal",
        icon: "wk wk-tag"
      });
      return temps;
    },

    // 展示筛选
    showFilterView() {
      if (this.crmType == "receivables_plan") {
        return false;
      }
      return true;
    },

    // 展示审核状态
    showCheckStatus() {
      if (this.crmType == "contract" || this.crmType == "receivables") {
        return true;
      }
      return false;
    },

    // 展示学员池天数
    showPoolDay() {
      if (this.crmType == "customer") {
        return true;
      }
      return false;
    },

    // 展示我的/下属筛选
    showSubType() {
      if (
        this.infoType == "todayCustomer" ||
        this.infoType == "todayBusiness" ||
        this.infoType == "todayLeads" ||
        this.infoType == "putInPoolRemind" ||
        this.infoType == "returnVisitRemind"
      ) {
        return true;
      }
      return false;
    },

    // 下拉数据
    options() {
      if (
        this.infoType == "todayCustomer" ||
        this.infoType == "todayBusiness" ||
        this.infoType == "todayLeads"
      ) {
        return [
          { name: "今日需联系", value: 1 },
          { name: "已逾期", value: 2 },
          { name: "已联系", value: 3 }
        ];
      } else if (
        this.infoType == "followLeads" ||
        this.infoType == "followCustomer"
      ) {
        return [{ name: "待跟进", value: 1 }, { name: "已跟进", value: 2 }];
      } else if (
        this.infoType == "checkContract" ||
        this.infoType == "checkReceivables" ||
        this.infoType == "checkInvoice" ||
        this.infoType == "refundnum"
      ) {
        return [{ name: "待审核", value: 1 }, { name: "已审核", value: 2 }];
      } else if (this.infoType == "remindReceivablesPlan") {
        return [
          { name: "待回款", value: 1 },
          { name: "已回款", value: 2 },
          { name: "已逾期", value: 3 }
        ];
      } else if (this.infoType == "endContract") {
        return [{ name: "即将到期", value: 1 }, { name: "已到期", value: 2 }];
      }

      return [];
    },

    /**
     * 能标记
     */
    canMark() {
      if (this.options.length) {
        if (this.showSubType && this.showOptions) {
          return this.optionsType == 1 && this.isSubType == 1;
        }

        if (this.showSubType) {
          return this.isSubType == 1;
        }

        if (this.showOptions) {
          return this.optionsType == 1;
        }
        return false;
      }

      return true;
    }
  },

  watch: {
    show() {
      if (this.showOptions && this.options.length > 0) {
        this.optionsType = this.options[0].value;
      }
      this.initTableHead();
    }
  },

  mounted() {
    if (this.showOptions && this.options.length > 0) {
      this.optionsType = this.options[0].value;
    }

    this.initTableHead();
  },

  methods: {
    /**
     * 初始化表头数据
     */
    initTableHead() {
      if (this.show) {
        this.currentPage = 1;
        if (this.fieldList.length == 0) {
          this.getFieldList();
        } else {
          this.getList(false);
          this.$store.dispatch("GetMessageNum");
        }
      }
    },

    /**
     * 刷新列表
     */
    refreshList() {
      this.currentPage = 1;
      if (this.fieldList.length > 0) {
        this.getList();
      } else {
        this.getFieldList();
      }
    },

    /**
     * 勾选数据
     */
    handleSelectionChange(val) {
      this.selectionList = val; // 勾选的行
    },

    /**
     * 勾选后的操作
     */
    selectionBarClick(type) {
      if (type == "follow") {
        this.$confirm("您确定此操作吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            const request = {
              followLeads: crmLeadsSetFollowAPI,
              followCustomer: crmCustomerSetFollowAPI
            }[this.infoType];
            request(this.selectionList.map(item => item[this.crmType + "Id"]))
              .then(res => {
                this.$message.success("操作成功");
                this.refreshList();

                this.$emit("on-handle", {
                  type: "follow",
                  value: this.selectionList.length,
                  infoType: this.infoType
                });
              })
              .catch(() => {});
          })
          .catch(() => {});
      } else if (type == "mark-deal") {
        const params = { model: this.model };
        params.list = this.selectionList.map(item => {
          const temp = {};
          const fieldKey =
            this.crmType === "receivables_plan"
              ? "planId"
              : this.crmType === "roiMoney"
              ? "putinMoneyId"
              : this.crmType === "enrolledCustomer" ||
                this.crmType === "dropoutCustomer" ||
                this.crmType === "suspendClassesCustomer"
              ? "customerId"
              : `${this.crmType}Id`;
          temp.typeId = item[fieldKey];
          // 待进入公海提醒 需要的公海id
          if (this.infoType == "putInPoolRemind") {
            temp.poolIds = item.poolIds;
          }
          return temp;
        });

        crmMessagzealByIdAPI(params)
          .then(res => {
            this.$message.success("操作成功");
            this.getList();
            this.$parent.refreshNum();
          })
          .catch(() => {});
      } else if (type == "changeStudentStauts") {
        if (this.selectionList) {
          this.selectIdList = [];
          for (var i = 0; i < this.selectionList.length; i++) {
            this.selectIdList[i] = this.selectionList[i].customerId;
          }
        }
        crmQueryBatchIdsByIdsAPI(this.selectIdList).then(res => {
          this.selectBatchIdList = res.data;
        });
        this.changeStudentStatusShow = true;
      }
    },

    handleCallBackStatus(data) {
      this.refreshList();
      this.$store.dispatch("GetMessageNum");
    },
    /**
     * 获取高级筛选字段数据后展示
     */
    getFilterFieldInfo() {
      if (this.crmType == "invoice") {
        this.filterFieldList = invoiceFilterFields;
        this.showFilter = true;
      } else {
        filterIndexfieldsAPI({
          label: crmTypeModel[this.crmType]
        })
          .then(res => {
            this.filterFieldList = res.data || [];
            this.showFilter = true;
          })
          .catch(() => {});
      }
    },

    /**
     * 选择筛选字段
     */
    handleFilter(form) {
      this.filterObj = form;
      this.showFilter = false;
      this.updateTableHeight();
      this.refreshList();
    },

    /**
     * 删除筛选字段
     */
    handleDeleteField(data) {
      this.filterObj = data.obj;
      this.updateTableHeight();
      this.refreshList();
    },

    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (
        (column.property === "name" && this.crmType != "contract") ||
        column.property === "number" ||
        column.property === "leadsName" ||
        column.property === "customerName" ||
        column.property === "businessName" ||
        column.property === "contactsName" ||
        column.property === "num" ||
        column.property === "visitNumber" ||
        column.property === "invoiceApplyNumber" ||
        column.property === "putinPlatform"
      ) {
        return "can-visit--underline";
      } else {
        return "";
      }
    },

    /**
     * 全部标记为已读
     */
    allMarkReadClick() {
      crmMessagAllDealAPI({
        model: this.model
      })
        .then(res => {
          this.$message.success("操作成功");
          this.$parent.refreshNum();
          this.getList();
        })
        .catch(() => {});
    },

    /**
     * 不能进行勾选操作
     */
    selectionDisabled() {
      return this.canMark;
    },
    getAddr(val) {
      if (!val) return;
      let obj = JSON.parse(val);
      let arr = [];
      for (let key in obj) {
        arr.push(obj[key]);
      }
      let newVal = arr.join(",");
      return newVal;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../styles/table.scss";
/** 场景和筛选 */
.filtrate-button {
  cursor: pointer;
  margin-left: 10px;
  display: inline-block;
  &-img {
    vertical-align: middle;
    margin: 0 5px;
    width: 12px;
  }
}
.filtrate-button:hover {
  color: $xr-color-primary;
}

.ec-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0px 16px;
}

.title {
  padding-bottom: 16px;
  font-size: 14px;
  color: #333;
  .wk-help {
    margin-left: 5px;
  }
}
.option-bar {
  padding: 15px 20px;
}

/** 勾选操作 */
.selection-bar {
  font-size: 12px;
  height: 35px;
  color: #777;

  .selected—title {
    flex-shrink: 0;
    padding-right: 20px;
    color: #333;
    .selected—count {
      color: $xr-color-primary;
    }
  }
}

.selection-items-box {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 15px;

  .el-button {
    color: #666;
    background-color: $xr--background-color-base;
    border-color: $xr--background-color-base;
    font-size: 12px;
    height: 28px;
    border-radius: 14px;
    /deep/ i {
      font-size: 12px;
      margin-right: 5px;
    }
  }

  .el-button--primary:hover {
    background: $xr-color-primary;
    border-color: $xr-color-primary;
    color: #ffffff;
  }

  .el-button + .el-button {
    margin-left: 15px;
  }
}

.n-table--border {
  border-top: 1px solid $xr-border-line-color;
}

.el-button--primary.is-plain {
  background-color: #EDF4FF;
}

.el-button--primary.is-plain:focus,
.el-button--primary.is-plain:active,
.el-button--primary.is-plain:hover {
  color: $xr-color-primary;
}

// 拉开图标与文字距离
.el-button--margin {
  /deep/ i {
    margin-right: 5px;
  }
}
</style>
